<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
import { storeToRefs } from 'pinia'
import { useOrderStore } from '@/store/modules/orderStore'
const orderStore = useOrderStore()
const { orderInfo } = storeToRefs(orderStore)

onMounted(() => {
  orderStore.getOrderInfo(route.query.id as string)
})

// 取消预约
const cancelReservation = () => {
  ElMessageBox.confirm('是否取消预约订单', '取消预约', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      const res = await orderStore.cancelOrder(route.query.id as string)

      if (res) {
        ElMessage.success('订单取消成功')
        orderStore.getOrderInfo(route.query.id as string)
      }
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消',
      })
    })
}

import { placeOrderToPayAPI, wechatPaymentStatusAPI } from '@/api/order'
import { weixinPayType, responseWeixinPayType } from '@/api/order/type'
// 导入微信二维码转换插件
import QRCode from 'qrcode'
// 是否显示支付对话框
const payVisible = ref<boolean>(false)
// 生成微信支付二维码对象
const weixinPay = ref({} as weixinPayType)
// 微信支付定时器
let timer: any = null

/** 下单生成微信二维码
 * id {number} 订单id
 */
const placeOrderToPay = async (id: number) => {
  const { data: res }: responseWeixinPayType = await placeOrderToPayAPI(id)
  if (res.code !== 200) return ElMessage.error(res.message)
  try {
    res.data.codeUrl = await QRCode.toDataURL(res.data.codeUrl)
    wechatPaymentStatus(id)
  } catch (error) {
    console.log(error)
  }

  weixinPay.value = res.data
  payVisible.value = true
}
/**
 *长轮询查询微信支付状态
 * @param id {number} 订单id
 */
const wechatPaymentStatus = (id: number) => {
  timer = setInterval(async () => {
    const { data: res } = await wechatPaymentStatusAPI(id)
    if (res.code !== 200) return ElMessage.error(res.message)
    if (res.data) {
      payVisible.value = false
      ElMessage.success('支付成功')
      orderStore.getOrderInfo(id)
      clearInterval(timer)
    }
  }, 2000)
}
/** 监听对话框关闭事件 */
const WechatClose = () => {
  clearInterval(timer)
}
</script>

<template>
  <el-card>
    <template #header>
      <div>
        <span>挂号详情</span>
      </div>
    </template>
    <!-- card body -->
    <div class="order_top">
      <el-tag type="success">
        <div class="order_tag">
          <svg-icon name="wancheng2" color="green" width="20px" height="20px"></svg-icon>
          <span>{{ orderInfo.param?.orderStatusString }}</span>
        </div>
      </el-tag>
      <div class="qrCode">
        <img src="@/assets/images/code_app.png" alt="" />
        <div class="info">
          <p>微信 关注 “北京114预约挂号”</p>
          <p>“快速预约挂号”</p>
        </div>
      </div>
    </div>
    <div class="order_bottom">
      <div class="descriptions">
        <el-descriptions border :column="1">
          <el-descriptions-item label="就诊人信息">{{ orderInfo.patientName }}</el-descriptions-item>
          <el-descriptions-item label="就诊日期">{{ orderInfo.reserveDate }}</el-descriptions-item>
          <el-descriptions-item label="就诊医院">{{ orderInfo.hosname }}</el-descriptions-item>
          <el-descriptions-item label="就诊科室">{{ orderInfo.depname }}</el-descriptions-item>
          <el-descriptions-item label="医生职称">{{ orderInfo.title }}</el-descriptions-item>
          <el-descriptions-item label="医事服务费">
            <span style="color: red">{{ orderInfo.amount }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="挂号订单">{{ orderInfo.outTradeNo }}</el-descriptions-item>
          <el-descriptions-item label="挂号时间">{{ orderInfo.createTime }}</el-descriptions-item>
        </el-descriptions>
        <div class="descriptions_btn" v-if="orderInfo.orderStatus !== -1">
          <el-button @click="cancelReservation">取消预约</el-button>
          <el-button type="primary" v-if="orderInfo.orderStatus !== 1" @click="placeOrderToPay(orderInfo.id)">支付</el-button>
        </div>
      </div>
      <div class="payAttentionTo">
        <el-card shadow="never">
          <template #header>
            <div>
              <span>注意事项</span>
            </div>
          </template>
          <p>1.请确认就诊人信息是否准确，若填写错误将无法取号就诊，损失由本人承担；</p>
          <p style="color: red">2.【取号】就诊当天需在{{ orderInfo.fetchTime }}在医院取号，未取号视为爽约，该号不退不换；</p>
          <p>3.【退号】在{{ orderInfo.quitTime }}前可在线退号 ，逾期将不可办理退号退费；</p>
          <p>
            4.北京114预约挂号支持自费患者使用身份证预约，同时支持北京市医保患者使用北京社保卡在平台预约挂号。请于就诊当日，携带预约挂号所使用的有效身份证件到院取号；
          </p>
          <p>5.请注意北京市医保患者在住院期间不能使用社保卡在门诊取号。</p>
        </el-card>
      </div>
    </div>
  </el-card>
  <!-- 支付对话框 -->
  <el-dialog title="微信支付" width="400" v-model="payVisible" :lock-scroll="false" @close="WechatClose">
    <div class="wxPay">
      <img :src="weixinPay.codeUrl" alt="" />
      <p>请使用微信扫一扫</p>
      <p>扫描二维码支付</p>
    </div>
  </el-dialog>
</template>

<style lang="scss" scoped>
.order_top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
  padding-bottom: 20px;
  .order_tag {
    display: flex;
    align-items: center;
    span {
      margin-left: 5px;
    }
  }
  .qrCode {
    display: flex;
    align-items: center;
    justify-content: space-between;
    img {
      width: 40px;
      height: 40px;
      margin-right: 5px;
    }
    p {
      font-size: 12px;
      line-height: 20px;
    }
  }
}
.order_bottom {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  .descriptions {
    width: 40%;
    .descriptions_btn {
      margin: 20px 0;
      display: flex;
      align-items: center;
    }
  }
  .payAttentionTo {
    width: 60%;
    margin-left: 40px;
    p {
      margin-bottom: 10px;
    }
  }
}
.wxPay {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>
